dojo.ready(function () {
    xolokost.makeCarusel("arena");
});

xolokost = (function () {
        
    var CaruselFSM, init_carusel;
    
    CaruselFSM = function (params) {
        // params:
        //   len:
        //     number of items in carusel
        //   transition_handler:
        //     Function object specifying what to do during transition
        //     from i-sate to j-state.
        //     Must return dojo.Deferred object.
        //         function (from, to, carusel):
        //             from, to -- current and target state
        //             carusel -- carusel object
        //
        this.params = params;
        // states: 0, 1, 2, ..., params.len-1 
        this.min_state = 0;
        this.max_state = params.len - 1;
        // initial state
        this.state = 0;
    };

    CaruselFSM.prototype = {
        fwrd: function () {
            // forward event handler
            var state = this.state;
            // if we are in transion now than ignore event
            if (this._transition_lock) return;
            // if we are in the end state than ignore event
            if (this.state == this.max_state) return;
            
            // do transition from j to j+1
            this._do_transition(state, state + 1);
        },
        bwrd: function () {
            // backward event handler
            var state = this.state;
            // if we are in transion now than ignore event
            if (this._transition_lock) return;
            // if we are in the begining state than ignore event
            if (this.state == this.min_state) return;
            
            // do transition from j to j-1
            this._do_transition(state, state - 1);
        },
        _do_transition: function (from, to) {
            var that = this;
            this._transition_lock = true;
            this.params.transition_handler(from, to, this).then(function () {
                that.state = to;
                that._transition_lock = false;
             });
        }
    };
            
    init_carusel = function (arena) {
        require(["dojo/_base/fx", "dojo/on", "dojo/query", "dojo/dom-style", "dojo/_base/Deferred", "dojo/domReady!"],
            function (fx, on, query, domStyle, Deferred) {
                var fwrdButton, bwrdButton, roll;
                var carusel;
                
                fwrdButton = query('.button.fwrd', arena);
                bwrdButton = query('.button.bwrd', arena);
                roll = query('.roll', arena);

                on(fwrdButton, "click", function(evt) {
                    carusel.fwrd();
                });
                on(bwrdButton, "click", function(evt) {
                    carusel.bwrd();
                });             

                carusel = new CaruselFSM({
                    len: 7,
                    transition_handler: function (from, to, carusel) {
                        var step = to - from;
                        var promise = new Deferred();
                        fx.animateProperty({
                            node: roll,
                            properties: {
                                top: {end: domStyle.get(roll, 'top') - step*60}
                            },
                            onEnd: function (node) {
                                console.log('onEnd', from, to, carusel);
                                if (to === carusel.max_state) {
                                    domStyle.set(fwrdButton, 'background', 'gray')
                                }
                                if (from === carusel.max_state) {
                                    domStyle.set(fwrdButton, 'background', 'black')
                                }        
                                if (to === carusel.min_state) {
                                    domStyle.set(bwrdButton, 'background', 'gray')
                                }
                                if (from === carusel.min_state) {
                                    domStyle.set(bwrdButton, 'background', 'black')
                                }                       
                                promise.resolve();
                            } 
                        }).play();
                        return promise;
                    }        
                });            
        });
    };        
            
    return {
        makeCarusel: function (node_id) {
            require(["dojo/dom", "dojo/on", "dojo/domReady!"], function (dom, on) {
                var arena = dom.byId(node_id);
                on.once(arena, "click", function(evt) {
                    init_carusel();
                });
            });                        
        }    
    };
})();//~xolokost




​
